<template>
	<navigator url="/pages/demo2/demo2">
		<image src="/static/pic1.png" mode="aspectFill"></image>
	</navigator>
	<view class="">
		<navigator url="/pages/demo1/demo1">跳转到demo1</navigator>
	</view>
	<view class="box" hover-class="boxHover">
		view布局标签
		<view class="inner" hover-class="innerBox" hover-stop-propagation="true">内部元素</view>
		<text selectable="true" space="ensp">text文本标签</text>
	</view>
	<scroll-view scroll-x="true"  sc class="scrollView">  <!-- 横向滑动三要素之一：设置scroll-x="true"*/-->
		<view class="boxScroll_x">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_x">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_x">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_x">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_x">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_x">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_x">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_x">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_x">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_x">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_x">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_x">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_x">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
	</scroll-view>
	<view>--------------</view>
	<view>--------------</view>
	<view>--------------</view>
	<scroll-view scroll-y="true" sc class="scrollView">
		<view class="boxScroll_y">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_y">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_y">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_y">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_y">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_y">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_y">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_y">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_y">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_y">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_y">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_y">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
		<view class="boxScroll_y">scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素scroll子元素</view>
	</scroll-view>
</template>

<script setup>
	
</script>

<style lang="scss">
	.scrollView {
		width: 80%;
		height: 220px;
		border: 1px solid red;
		white-space: nowrap; /* 横向滑动三要素之二：父级设置不换行*/
		.boxScroll_y{
			width: 100px;
			height: 100px;
		}
		.boxScroll_x{
			width: 100px;
			height: 100px;
			background-color: green;
			display: inline-block;  /* 横向滑动三要素之三：设置为一行显示*/
			margin: 2px;
		}
	}
	.box{
		width: 200px;
		height: 200px;
		background-color: #ccc;
	}
	.boxHover{
		background-color: red;
		width: 300px;
		height: 300px;
	}
	.inner{
		background-color: green;
	}
	.innerBox{
		background-color: yellow;
	}
</style>
